<template>
    <div>
        <a-modal
            v-model:visible="visibleShow"
            title="质量管理体系文件审批表"
            width="100%"
            wrapClassName="full-modal"
            :footer="null"
        >
            <a-spin size="large" :spinning="spinning" >
                <div id="printApprovalForm" v-if="visibleShow && approvalFormList.length">
                    <div v-for="(item,index) in approvalFormList" :key="index" style="font-size: 16px;margin-bottom: 50px;">
                        <div style="
                        display: flex;
                        justify-content: space-between;
                        border-bottom: 1px solid #212020;
                        font-size: 14px;
                        color: #000;
                        ">
                            <span>xx壮族自治区食品药品审评查验中心</span>
                            <span>质量管理体系用表</span>
                            <span>{{ item.zltxwj.fwjbh }}</span>
                        </div>
                        <div style="width: 100%;text-align: center;padding: 40px 10px 10px 10px; ">
                            <h2>质量管理体系文件审批表</h2>
                        </div>
                        <div style="text-align: right; padding: 10px 100px 10px 10px;">编号：{{ item.zltxwj.fwjbh }}</div>
                        <table border="1" style="width: 100%;">
                            <tr>
                                <td style="width: 80px;text-align: center;"><span style="padding: 5px;display: inline-block;">文件名</span></td> <td><span style="padding: 5px;display: inline-block;">{{ item.zltxwj.fwjmc }}</span></td>
                                <td style="width: 80px;text-align: center;"><span style="padding: 5px;display: inline-block;">文件编号</span></td> <td><span style="padding: 5px;display: inline-block;">{{ item.zltxwj.fwjbh }}</span></td>
                            </tr>
                            <tr>
                                <td style="padding-left: 30px;">
                                    <span style="display: inline-block;width: 18px;padding: 15px 0;">提出文件的依据</span>
                                </td>
                                <td colspan="3" style="padding: 10px;">
                                    <span style="display: inline-block;padding: 5px;">
                                        <span style="display: inline-block;margin-right: 15px;">
                                            <span v-if="item.zltxwj.fxglx == '新增'">☑</span>
                                            <span v-else>☐</span>
                                            <span>新增文件</span>
                                        </span>
                                        <span style="display: inline-block;margin-right: 15px;">
                                            <span v-if="item.zltxwj.fxglx == '修订'">☑</span>
                                            <span v-else>☐</span>
                                            <span>修订文件</span>
                                        </span>
                                        <span style="display: inline-block;margin-right: 15px;">
                                            <span v-if="item.zltxwj.fxglx == '废止'">☑</span>
                                            <span v-else>☐</span>
                                            <span>废止文件</span>
                                        </span>
                                    </span>
                                    <!-- 修订理由 -->
                                    <div style="padding: 20px;width: 100%;">
                                        {{ item.zltxwj.fxdly }}
                                    </div>
                                    <span style="display: inline-block;padding-bottom: 15px;">拟实施日期：{{ dateChange(item.zltxwj.fssrq) }}</span>
                                    <div style="display: flex;justify-content: space-around;">
                                        <div v-for="(term,tIndex) in item.jobList" :key="tIndex" v-if="term.fhjmc == '申请'">
                                            <div>提出人：<img style="height: 30px;" :src="term.url" alt=""></div>
                                            <div style="padding: 10px 0 10px 64px;">日期：{{ dateChange(term.fblsj) }}</div>
                                        </div>
                                        <div v-else-if="term.fhjmc !== '申请' && !term.fhjmc">
                                            <div>提出人：</div>
                                            <div style="padding: 10px 0 10px 64px;">日期：</div>
                                        </div>
                                        <div v-for="(term,tIndex) in item.jobList" :key="tIndex" v-if="term.fhjmc == '科室复核'">
                                            <div>复核人：<img style="height: 30px;" :src="term.url" alt=""></div>
                                            <div style="padding: 10px 0 10px 64px;">日期：{{ dateChange(term.fblsj) }}</div>
                                        </div>
                                        <div v-else-if="term.fhjmc !== '科室复核' && !term.fhjmc">
                                            <div>复核人：</div>
                                            <div style="padding: 10px 0 10px 64px;">日期：</div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left: 30px;">
                                    <span style="display: inline-block;width: 18px;padding: 5px 0;">分管领导意见</span>
                                </td>
                                <td colspan="3" style="padding: 10px;">
                                    <div v-for="(term,tIndex) in item.jobList" :key="tIndex" v-if="term.fhjmc == '分管领导' || term.fhjmc =='管理者代表'">
                                        <div style="padding: 20px;">
                                            {{ term.opinion }}
                                        </div>
                                        <div style="display: flex;justify-content: flex-end;">
                                            <span style="padding-right: 50px;">签名：<img style="height: 30px;" :src="term.url" alt=""></span>
                                            <span style="padding-right: 50px;">日期：{{ dateChange(term.fblsj) }}</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left: 30px;">
                                    <span style="display: inline-block;width: 18px;padding: 5px 0;">管理者代表意见</span>
                                </td>
                                <td colspan="3" style="padding: 10px;">
                                    <div v-for="(term,tIndex) in item.jobList" :key="tIndex" v-if="term.fhjmc == '管理者代表' || term.fhjmc =='管理者代表'">
                                        <div style="padding: 20px;">
                                            {{ term.opinion }}
                                        </div>
                                        <div style="display: flex;justify-content: flex-end;">
                                            <span style="padding-right: 50px;">签名：<img style="height: 30px;" :src="term.url" alt=""></span>
                                            <span style="padding-right: 50px;">日期：{{ dateChange(term.fblsj) }}</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left: 30px;">
                                    <span style="display: inline-block;width: 18px;padding: 5px 0;">批准人意见</span>
                                </td>
                                <td colspan="3" style="padding: 10px;">
                                    <div v-for="(term,tIndex) in item.jobList" :key="tIndex" v-if="term.fhjmc == '中心领导'">
                                        <div style="padding: 20px;">
                                            {{ term.opinion }}
                                        </div>
                                        <div style="display: flex;justify-content: flex-end;">
                                            <span style="padding-right: 50px;">签名：<img style="height: 30px;" :src="term.url" alt=""></span>
                                            <span style="padding-right: 50px;">日期：{{ dateChange(term.fblsj) }}</span>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td style="padding-left: 30px;">
                                    <span style="display: inline-block;width: 18px;padding: 5px 0;">备注</span>
                                </td>
                                <td colspan="3" style="padding: 10px;">
                                    {{ item.zltxwj.fqcsm }}
                                </td>
                            </tr>
                        </table>
                        <div style="display: flex;justify-content: space-between;padding: 15px 10px;">
                            <span>{{ item.zltxwj.fscrq }}启用</span>
                            <span>质量管理与科研科归档</span>
                        </div>
                        <!--  换页 -->
                        <div style="page-break-after:always"></div>
                    </div>
                </div>
                <div v-else style="width: 100%;height: 50px;font-size: 20px;line-height: 20px;text-align: center;">
                        当前暂无数据！
                </div>
                <div style="display: flex;margin: 30px;justify-content: center;" v-if="approvalFormList.length">
                    <a-button class="blue-btn" type="primary" v-print="printObj" icon="copy" >打印</a-button>
                </div>
            </a-spin>
        </a-modal>
    </div>
</template>
<script>
import { queryPrintZltxwjTable, downMyQm  } from './service/index'
import moment from 'moment'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            moment:moment,
            visibleShow:false,
            spinning:false,
            approvalFormList:[],
            printObj:{
                id:"printApprovalForm", //需要打印的id名称
                popTitle:"质量管理体系文件审批表",//文档的名称
                beforeOpenCallback (vue) {
                    //console.log('打开之前')
                },
                closeCallback (vue) {
                    //console.log('关闭了打印工具')
                }
            },
        }
    },
    watch:{

    },
    mounted(){
    },
    methods:{
        getData(val){
            this.spinning = true
            queryPrintZltxwjTable({ids:val}).then(res=>{
                if(res.code == 200){
                    //console.log(res)
                    this.approvalFormList = []
                    res.result.printList.forEach((item,index) => {
                        if(item.jobList && item.jobList.length){
                            item.jobList.forEach((term,tIndex)=>{
                                if(term.fuserid){
                                    downMyQm({id:term.fuserid}).then(dRes=>{
                                        item.jobList[tIndex]['url'] =  "data:image/png;base64," + btoa( new Uint8Array(dRes).reduce( (data, byte) => data + String.fromCharCode(byte), "" ))
                                        let arr = this.approvalFormList.filter(i=>i.zltxwj.id == item.zltxwj.id)
                                        if(!arr.length){
                                            this.approvalFormList.push(item)
                                        }
                                    })

                                }else{
                                    let arr = this.approvalFormList.filter(i=>i.zltxwj.id == item.zltxwj.id)
                                    if(!arr.length){
                                        this.approvalFormList.push(item)
                                    }
                                }
                            })
                        }
                    });
                    //console.log('最后得到了什么',this.approvalFormList)
                }else{
                    this.$message.warning(res.massage)
                    this.approvalFormList = []
                }
                this.spinning = false
            })
        },
        dateChange(val){
            if(val){
                return moment(val).format('YYYY年MM月DD日')
            }else{
                return ''
            }

        }
    }
}
</script>
<style lang="less">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    overflow-y: auto;
    background-color: #fff !important;
  }
}
</style>
